<template>
  <div class="home">
    <nut-navbar class="top" @on-click-back="back" title="Li__in的视频" @on-click-send="share"  icon="share"></nut-navbar>
    <div class="view-box">
      <nut-barrage ref="danmu" :danmu="list" :speeds="8000" class="danmu"></nut-barrage>
      <nut-video
          class="video"
          :source="source"
          :options="options"
          @play="play"
          @pause="pause"
          @playend="playend">
      </nut-video>
    </div>
    <nut-row clss="btn-box">
      <nut-col :span="11">
        <nut-input v-model="inputVal"  placeholder="请输入弹幕" label="弹幕" />
      </nut-col>
      <nut-col :span="7">
        <nut-button type="info" @click="getToken" class="button">getToken</nut-button>
      </nut-col>
      <nut-col :span="6">
        <nut-button type="primary" @click="addDanmu" class="button">发弹幕</nut-button>
      </nut-col>
    </nut-row>
    <div class="comment">
      <nut-divider  class="comment-title">(ノ—_—)ノ~┴——┴ &nbsp&nbsp&nbsp左滑删除↓</nut-divider>
      <Comment v-for="item in number"/>
      <nut-button size="large" type="info" @click="refresh">刷新</nut-button>
    </div>
    <nut-backtop :distance="10" :bottom="100"></nut-backtop>
  </div>
</template>

<script>
import {ref, reactive,toRefs} from 'vue'
import { Toast } from "@nutui/nutui";
import Comment from '@/components/Comment.vue'

export default {
  name: 'Home',
  // vue3的写法
  // 组件库地址 https://nutui.jd.com/#/button
  setup() {
    const danmu = ref(null);

    function addDanmu() {
      danmu.value.add('----我的弹幕:----' + state.inputVal);
      Toast.success('弹幕发送成功');
    }

    function getToken(){
      if (window.getTokenForHarmonyOS && window.getTokenForHarmonyOS.call) {
        let result = getTokenForHarmonyOS.call("message from web");
        Toast.success("token：" + result);
      }else {
        Toast.fail("token 获取失败");
      }
    }

    function back(){

      axios.get('https://api.github.com/users')
          .then(res=>{
            Toast.success("res：" + res);

          })
          .catch(err=>{
            console.log(err);
            Toast.success("err：" + err);

          })
    }

    function share(){
      if (window.sharePage && window.sharePage.call) {
        let result = sharePage.call("message from web");
        Toast.success(result);
      }else {
        Toast.fail("分享失败，请确定当前为HarmonyOS环境");
      }
    }

    function refresh(){
      state.number = Math.round(Math.random()*10);
    }
    const state = reactive({
      source: {
        src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D",
        type: "video/mp4",
      },
      options: {
        autoplay: true,
        muted: true,
        controls: true
      },
      list:["画美不看", "不明觉厉", "喜大普奔", "男默女泪", "爷青结"],
      inputVal:'',
      number:5
    });
    const play = (elm) => console.log('play', elm);
    const pause = (elm) => console.log('pause', elm);
    const playend = (elm) => console.log('playend', elm);
    return {
      back,
      danmu,
      share,
      addDanmu,
      getToken,
      play,
      pause,
      playend,
      refresh,
      ...toRefs(state)
    };
  },
  components:{
    Comment
  }
}
</script>
<style lang="scss">

.nut-navbar{
  margin-bottom: 0 !important;
  height: 30px !important;
}
.nut-barrage{
  margin-top: 70px;
  height: 200px !important;
  overflow: hidden;
}
.move{
   z-index: 10;
   color: white;
 }
 .video{
   width: 100%;
   height: auto;
 }
 .comment-title{
   height: 40px;
 }
 .button{
   width: 100%;
 }
</style>
